/**
 * 1. 获取li的index()实现元素的操作
 * 2. 实现更换背景
 * 3. 更换播放器文本和图片
 * 4. 设置播放按钮以及上一首/下一首
 * 5. 图片旋转
 * 6. 音乐播放
 */

$(function() {

	var index = 0;
	// 获取li元素
	var li = $('.banner ul li');
	// 获取音乐播放器
	var music = $('.music');
	// 获取播放器图片
	var img = $('.music .m-img img');
	// 获取播放器文本
	var text = $('.music .m-text');
	// 获取上一首按钮
	var prev = $('.music .m-btn .m-prev');
	// 获取播放按钮
	var play = $('.music .m-btn .m-play');
	// 获取下一首按钮
	var next = $('.music .m-btn .m-next');
	// 获取音频元素
	var mp3 = $('.music .m-mp3');
	// 获取收起按钮
	var open = $('.music .m-open');
	// 歌曲是否播放的标识
	var flag = false;
	// 播放器是显示还是隐藏的标识
	var close = false;
	// 获取点击li的索引
	li.click(function() {
		// console.log($(this).index());
		// 获取当前点击的索引 
		index = $(this).index();
		// console.log(index);
		show();
	})
	// 播放歌曲
	function show() {
		change_bg(index + 1);
		change_img_text(index + 1);
		change_btn_title();
		img_rotate(index);
		play_mp3(index);
	}

	// 更换背景
	function change_bg(index) {
		$('body').css({
			'background': 'url(img/bg' + index + '.jpg) no-repeat',
			'background-size': 'cover'
		})
	}
	// 更换播放器的文字和图片
	function change_img_text(index) {
		// arrt() 有两个属性写一个是查找，写两个是替换
		// 更换播放器图片
		img.attr('src', 'img/' + index + '.jpg');
		// 设置text的元素内容相当于innnerHTML，然后再获取当前点击的li，获得title然后设置内容
		text.html(li.eq(index - 1).attr('title'));
	}

	// 播放按钮的设置
	function change_btn_title() {
		play.html('&#xe87a;').attr('title', '暂停');

	}
	// 图片旋转
	function img_rotate(index) {
		li.css({
			'animation': ''
		})
		li.eq(index).css({
			// 'transform': 'rotate(360deg)',
			// 'transition': 'all .6s',
			'animation': 'rotate 2.8s linear infinite'
		})
	}

	// 歌曲播放
	function play_mp3(index) {
		mp3.attr('src', li.eq(index).attr('data-src'));
		// 播放音频的固定写法
		mp3.get(0).play();
		// 第一次点击页面之后设置背景图
		change_bg(index + 1)
		flag = true;
	}
	play.click(function() {
		/**
		 * 如果歌曲正在播放，要完成的事情
		 * 1.歌曲的暂停
		 * 2.图片停止旋转
		 * 3.更换按钮和title
		 */
		if (flag) {
			mp3.get(0).pause();
			li.eq(index).css({
				'animation': ''
			})
			play.html('&#xe87c;').attr('title', '播放');
			flag = false;
		} else {
			play_mp3(index);
			img_rotate(index);
			change_btn_title()
		}
	})

	// 上一首
	prev.click(function() {
		index--;
		if (index < 0) {
			index = li.length - 1;
		}
		show();
	})
	// 下一首
	next.click(function() {
		index++;
		if (index > li.length - 1) {
			index = 0;
		}
		show();
	})

	// 隐藏与显示
	open.click(function() {
		if (close) {
			music.css({
				'animation': 'moveshow 1s forwards'
			})
			$(this).html('&#xe660;').css('background-color', '#5f5f5f');
			close = false;
		} else {
			music.css({
				'animation': 'movehide 1s forwards'
			})
			$(this).html('&#xe65f;').css('background-color', '#179b6a');
			close = true;
		}
	})
})
